// 添加人员

<template>
    <div @touchmove.prevent>
        <van-popup
            v-model="visible"
            position="bottom"
            class="popup-bg"
            get-container="body"
            :style="{ height: '100%', background: '#F4F6F9' }"
            :lock-scroll="false"
        >
            <f7-page>
                <f7-navbar>
                    <f7-nav-left>
                        <f7-link
                            @click="fnColse"
                            icon-material="chevron_left"
                            force
                        ></f7-link>
                    </f7-nav-left>
                    <f7-nav-title>选择检测报告</f7-nav-title>
                    <f7-nav-right> </f7-nav-right>
                </f7-navbar>
                <div class="search-box">
                    <van-search
                        v-model="checkCode"
                        @search="searchQuery"
                        @clear="reset"
                        shape="round"
                        background="#1990ff"
                        placeholder="报告编号"
                        show-action
                    >
                        <template #action>
                            <div @click="searchQuery" class="search-bar-btn">搜索</div>
                        </template>
                    </van-search>
                </div>
                <div class="radio-list">
                    <van-list
                        class="search-list"
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="dataQuery"
                        v-if="query.data.length > 0"
                    >
                        <li
                            v-for="(item, index) in query.data"
                            :key="index"
                            @click="toggle(item, index)"
                        >
                            <div class="search-list-item">
                                <div class="left">
                                    <img v-if="item.isQualified" src="../../../../assets/img/qzjx/work.svg" alt="">
                                    <img v-else src="../../../../assets/img/qzjx/unwork.svg" alt="">
                                </div>
                                <div class="right">
                                    <h3>
                                        {{item.checkCode||'--'}}
                                    </h3>
                                    <p>
                                        <span class="tag tag-fill" v-if="item.propertyCode">{{item.propertyCode}}</span>
                                        <span class="tag tag-fill" v-if="item.checkStatus">{{item.checkStatus}}</span>
                                    </p>
                                    <p>
                                        <span class="qzjx_label">检测单位：</span>
                                        <span class="qzjx_value">{{item.checkOrgName||'--'}}</span>
                                    </p>
                                    <p>
                                        <span class="qzjx_label">报告日期：</span>
                                        <span class="qzjx_value">{{item.resultTime||'--'}}</span>
                                    </p>
                                </div>
                            </div>
                        </li>
                    </van-list>
                    <v-empty v-else description="暂无数据" />
                </div>
            </f7-page>
        </van-popup>
    </div>
</template>

<script>
import Config from '@/libs/config.js'
export default {
    name: 'v-popup-person-list',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        // 操作后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true,
        },
        url: {
            type: String,
        },
        equipmentType:{
            type: String
        },
        propertyId:{
            type: String
        },
        isInstall:{
            type:Number|String,
            default:''
        }
    },
    computed: {
        visible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    data() {
        return {
            checkCode: '',
            result: [],
            query: {
                data: [],
            },
            start: 0,
            length: 10,
            recordsTotal: null,
            loadFlag: true,
            download: Config.api.download,
            lastChooseList:[],
            nowChooselist:[],
            loading: false,
            finished: false,
        }
    },
    created() {
        this.searchQuery()
    },
    methods: {
        showTime1(date) {
            if (date) {
                return formatter.formatDate(date, 'yyyy-MM-dd')
            } else {
                return '--'
            }
        },
        checkTime(date) {
            let currentDate = formatter.formatDate(new Date(), 'yyyy-MM-dd')
            let currentDateNum = Date.parse(currentDate)
            let dateNum = Date.parse(date)
            if (Number(currentDateNum) > Number(dateNum)) {
                return true
            } else {
                return false
            }
        },
        searchQuery() {
            // 设置start为0，数组清空，然后才加载数据
            this.start = 0
            this.query.data = []
            this.loadData()
        },
        reset() {
            this.checkCode = ''
            this.start = 0
            this.query.data = []
            this.loadData()
        },
        dataQuery() {
            if (this.loadFlag) {
                if (
                    this.recordsTotal &&
                    this.query.data.length >= this.recordsTotal
                ) {
                    this.finished = true
                } else {
                    this.loadFlag = false
                    this.loadData()
                }
            }
        },
        loadData(rqurl = this.url) {
            let self = this
            if (rqurl) {
                let params = { start: self.start, length: self.length }
                params[`query[checkStatus]`] = 4
                params[`query[normalCheck]`] = 1
                params[`query[equipmentType]`] = self.equipmentType
                if (self.checkCode) {
                    params[`query[checkCode]`] = self.checkCode
                }
                if (self.propertyId) {
                    params[`query[propertyId]`] = self.propertyId
                }
                if(self.isInstall){
                    params[`query[isInstall]`] = self.isInstall
                }
                self.$f7.preloader.show()
                self.$f7.request.postJSON(
                    rqurl,
                    params,
                    (r) => {
                        self.$f7.preloader.hide()
                        self.loading = false
                        if (r) {
                            if (_.isArray(r.data)) {
                                _.each(r.data, (item) => {
                                    self.query.data.push(item)
                                })
                                self.start += self.length
                                self.recordsTotal = r.recordsTotal
                                self.$emit('onAfterQuery', self.query.data)
                            }
                        }
                        self.loadFlag = true
                    },
                    (r) => {
                        self.loadFlag = true
                    }
                )
            }
        },
        // 关闭组件
        fnColse() {
            this.visible = false
        },
        // 点击选中项
        toggle(item, index) {
            this.autoClose && this.fnColse()
            this.$emit('save', item)
        },
    },
}
</script>
<style lang="less" scoped>
@import url('../../../../assets/css/commonSelect.less');
.qzjx_label{
  color: #909DB6;
  flex-shrink: 0;
}
.qzjx_value{
  color: #61677A;
}
.popup-bg .radio-list{
    padding-bottom: 0;
}
.search-list-item{
    margin-left: 0!important;
    flex-direction: initial;
    align-items: center!important;
    h3{
        color: #242424;
        font-weight: 400;
        font-size: 16px;
    }
    p{
        display: flex;
        margin-top: 10px;
        font-size: 13px;
    }
    .tag.tag-fill{
        background: rgba(115, 125, 138, 0.1);
        color: #61677A;
        border: none;
    }
    .left {
        margin-right: 15px;
        img{
            width: 50px;
        }
    }
}
</style>
